<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>教师列表</title>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container{
            width: 80%;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="layui-row" style="justify-content: center;display: flex">
        <h1> 教师信息管理</h1>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs12 toolbar">

            <div class="laui-row">
                <button type="button" class="layui-btn lay-btn-sm layui-btn-normal"
                onclick="showAddInfo();return false;">
                    <i class="layui-icon layui-icon-addition"></i>
                </button>

                <button type="button" class="layui-btn lay-btn-sm layui-btn-normal layui-bg-red"
                onclick="delData();return false;" style="float: right">
                    <i class="layui-icon layui-icon-delete"></i>
                </button>
            </div>
        </div>

        <div class="queryBox">
            <form action="" class="layui-form" id="queryForm">
                <ul class="query-inline">
                    <li class="layui-input-group">
                        <div class="layui-input-prefix">
                            学号
                        </div>
                        <input type="text" placeholder="学号" class="layui-input" name="sn">
                    </li>

                    <li class="layui-input-group">
                        <div class="layui-input-prefix">
                            姓名
                        </div>
                        <input type="text" placeholder="支持模糊查询" class="layui-input" name="name">
                    </li>

                    <li class="layui-input-group">
                        <div class="layui-input-prefix">
                            邮箱
                        </div>
                        <input type="text" placeholder="邮箱" class="layui-input" name="email">
                    </li>

                    <li class="layui-input-group">
                        <button type="button" class="layui-btn lay-btn-sm layui-btn-normal "
                        onclick="loadDateList();return false;" style="margin-left: 20px">
                            查询
                        </button>
                    </li>
                </ul>
            </form>
        </div>
        <!--表格-->
        <div >
            <table class="layui-hide" id="teacher" lay-filter="teacher"></table>
        </div>
    </div>

    <div class="addInfo" id="addInfo" style="display: none;margin: 10px ">
        <form  class="layui-form layui-form-pane" id="addInfoForm" >
            <div class="layui-form-item">
               <input type="hidden" name="id">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学工号</label>
                <div class="layui-input-block">
                    <input type="text" name="sn" autocomplete="off" placeholder="请输入学号" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" autocomplete="off" placeholder="请输入密码" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" autocomplete="off" placeholder="请输入联系方式" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门编号</label>
                <div class="layui-input-block">
                    <input type="text" name="departmentSn" autocomplete="off" placeholder="请输入部门编号" lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" autocomplete="off" placeholder="请输入邮箱" lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" autocomplete="off" placeholder="请输入联系年龄" lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="submit">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="editTemplate">
    <div class="layui-clear-space">
        <!--lay-event 表示表格编辑事件-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            编辑
        </a>
    </div>
</script>


<script src="/js/layui.js"></script>


<script type="module">
    import {showEdit,search,delData} from "/js/pageJs/list.js";
    // 确保模块加载完成后再调用函数
    // 定义并挂载到全局对象
    window.showAddInfo = () => {
        let data={};
       showEdit('add',data);
    };
    window.loadDateList=()=>{
        search();
    }
    window.delData=()=>{
        delData();
    }
</script>

</body>
</html>